<template>
  <ul class="tab-bar">
    <router-link class="index" tag="li" to="/index">
      <i class="icon-index"></i>
      <span>首页</span>
    </router-link>
    
    <router-link class="order" tag="li" to="/order">
      <i class="icon-order"></i>
      <span>订单</span>
    </router-link>

    <router-link class="mine" tag="li" to="/mine">
      <i class="icon-mine"></i>
      <span>我的</span>
    </router-link>
  </ul>
</template>

<script>
export default {

}

</script>
<style lang='scss' scoped>
@import '@/assets/scss/const.scss';
@import '@/assets/scss/mixin.scss';

.tab-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  display: flex;
  flex-direction: row;
  background-color: #fcfcfc;
  border-top: 1px solid #b6b6b6;
  li {
    flex: 1;
    i {
      display: block;
      width: 25px;
      height: 25px;
      background: url(./tab-icons.png) no-repeat;
      background-size: 25px auto;
      margin: 3px auto;
    }
    span {
      font-size: 12px;
    }
  }

  .icon-index {
    background-position: (0 -75px);
  }
  .index.router-link-active .icon-index {
    background-position: 0 -50px;
  }
  
  .icon-order {
    background-position: (0 -25px);
  }
  .order.router-link-active .icon-order {
    background-position: 0 -0px;
  }

  .icon-mine {
    background-position: 0 -125px;
  }
  .mine.router-link-active .icon-mine {
    background-position: 0 -100px;
  }
}
</style>